<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () {
            document.getElementById("btn").onclick = function () {
                var aa;
                // 1. 创建XMLHttoRequest 对象
                // 2. 配置请求,请求到哪里,请求方法是否同步
                // 3. 监听请求过程, 耿工怎么样, 实现怎么样
                // 4. 发送请求

                // 1. 创建XMLHttoRequest 对象
                var xmlhttp = createXMLHttpRequest();

                // 2 
                // 第一个参数是请求方式
                // 第二个参数是请求 url
                // 第三个参数是, 是否异步(true 就是异步)
                xmlhttp.open("GET", "ajaxTest?id=1", true);

                // 3,监听
                xmlhttp.onreadystatechange = function () {
                    // readyState 是 4 说明请求完成
                    // status 是 200 说明请求成功
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        // xmlhttp.responseText; 是字符串形式
                        // xmlhtto.responXML; 是 XML 形式
                        // {key:value}
                        //aa = xmlhttp.responseText;
                        document.getElementById("data").innerHTML = xmlhttp.responseText;
                    }
                };

                // 4.发送请求
                xmlhttp.send();
                alert(aa);
            }
        };

        // 获取 ajax 引擎对象
        function createXMLHttpRequest() {
            if (window.XMLHttpRequest) {
                return new XMLHttpRequest();
            } else {
                return new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
    </script>
</head>

<body>
    <button id="btn">获取数据</button>
    <img src="./images/1-small.jpg" alt="">
    <div id="data"></div>
</body>

</html>